/* banner */
#banner{
    display:flex;
}

/* bannerLeft */
.bannerLeft{
    width: 200px;
    height: 430px;
    /* background-color: #f00; */
    /* 左边的盒子盖住右边的盒子 */
    position:relative;
    z-index:200;
}
.bannerLeft ul{
    width: 200px;
    height: 420px;
    /* background-color:green; */
    margin-top:5px;
    position:relative;
}
.bannerLeft ul li{
    height:30px;
    line-height:30px;
    font-size:12px;
    background-color: #f3f3f3;
    color:#444;
}

.bannerLeft ul li p{
    width: 200px;
    height: 30px;
    background-color: #f3f3f3;
    
}
.bannerLeft ul li p.active{    
    border:1px solid #ff0;
    box-sizing: border-box;
    /* p标签盖住了subMenu标签 */
    position:relative;
    z-index:101;
    border-right:none;
}   

.bannerLeft ul li .subMenu{
    width: 800px;
    height: 420px;
    background-color:#f3f3f3;
    position:absolute;
    left:196px;
    top:0px;
    border:1px solid #ff0;
    z-index:100;
    display:none;
    color:#000;
    font-size:100px;
    text-align:center;
    line-height:420px;
}
.bannerLeft ul li .subMenu.active{
    display:block;
}



/*end bannerLeft */

/* bannerRight */
.bannerRight{
    width: 1000px;
    height: 430px;
    background-color: #ff0;
}

/* end bannerRight */

/* end banner */


/* recomend */

.recomendHead{
    height:40px;
    line-height:40px;
    border-bottom:6px solid #ff6600;
    box-sizing: border-box;
    font-size:20px;
    text-indent:20px;
}

.recommendContent{
    height:500px;
    padding-left:3px;
}
.box199250{
    width: 199px;
    height: 250px;
    border-left:1px solid #ff6600;
    border-bottom:1px solid #ff6600;
    box-sizing: border-box;
    float:left;
    text-align:center;
}

.borderRight{
    border-right:1px solid #ff6600;
}
.box199250 p{
    text-align:left;
    margin-top:10px;
    text-indent:10px;
}


.limitedTime{
    width: 75px;
    height: 25px;
    background-position:-202px -100px;
}




/* end recomend */


/* ebook */
#ebook{
    height:480px;
    display:flex;
    justify-content: space-between;
    align-items: flex-end;
}
/* ebookLeft */
#ebook .ebookLeft{
    width: 900px;
    height:480px;
}


.ebookLeftContent{
    width: 900px;
    height: 440px;
    /* background-color: #f00; */
    display:flex;
}
.ebookLeftContentLeft{
    width: 240px;
    height: 440px;
    background-color: #f9f9f9;
}
.ebookLeftContentLeft img{
    width: 240px;
    height: 280px;
}
.ebookLeftContentLeft ul li{
    width:33.3%;
    margin-top:20px;
    float:left;
}
.ebookLeftContentRight{
    width: 660px;
    height: 440px;
    /* background-color:pink; */
}
.box330220{
    width: 330px;
    height: 220px;
    border-left:1px solid #ccc;
    border-bottom:1px solid #cccc;
    box-sizing: border-box;
    float:left;
}
.box165220{
    width: 165px;
    height: 220px;
    border-left:1px solid #ccc;
    border-bottom:1px solid #cccc;
    box-sizing: border-box;
    float:left;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}
.box165220 p{
   
    width:100%;
    text-indent:10px;
}
.box165220 .pImg{
     /* background-color: #f00; */
    text-align:center;

}

.borderRight2{
    border-right:1px solid #ccc;
}
/* end ebookLeft */
/* ebookRight */
#ebook .ebookRight{
    width: 280px;
    height:440px;
    /* background-color: deeppink; */
    border:1px solid #ccc;
    box-sizing: border-box;
}

#ebook .ebookRight h3{
    height:40px;
    color:#666;
    text-align:center;
    line-height:40px;
    font-size:25px;
    /* background-color: green; */
}
#ebook .ebookRight ul li{
    display:flex;
}

#ebook .ebookRight ul li .liRight{
    width: 260px;
    height: auto;
    border-bottom:1px solid #ccc;
    display:flex;
}
.bookNum{
    width: 20px;
    height: 40px;
    /* background-color: #f00; */
    text-align:center;
    line-height: 40px;
}

.bookName{
    width: 260px;
    height: 40px;
    /* background: green; */
    line-height: 40px;
    
}
.bookName.active{
    display:none;
}
.bookImg{
    width: 100px;
    height: 145px;
    display:none;
}
.bookImg.active{
    display:block;
}
.bookImg img{
    width: 100%;
    height: 100%;
}
.bookDiscription{
    width: 125px;
    height: 145px;
    font-size:12px;
    line-height:15px;
    margin-left:10px;
    display:none;
}
.bookDiscription.active{
    display:block;
}


/* end ebookRight */

/* end ebook */


/* clothes */
.clothesContent{
    width:100%;
    height:500px;
    /* background-color: pink; */
    display:flex;
}

.clothesContentLeft{
    width: 240px;
    height: 500px;
    background-color: #f9f9f9;
}
.clothesContentLeft img{
    width: 240px;
    height: 350px;
}
.clothesContentLeft ul li{
    width: 33.3%;
    height:40px;
    float:left;
}



.clothesContentRight{
    width: 960px;
    height: 500px;
    /* background-color: blue; */
}
.clothesContentRight ul li{
    float:left;
}

/* 430*340  176*340 430*160 176*160 */
.box430340{
    width: 430px;
    height: 340px;
    border-left:1px solid #ccc;
    border-bottom:1px solid #ccc;
    box-sizing: border-box;
}
.box176340{
    width: 176px;
    height: 340px;
    border-left:1px solid #ccc;
    border-bottom:1px solid #ccc;
    box-sizing: border-box;
}
.box430160{
    width: 430px;
    height: 160px;
    border-left:1px solid #ccc;
    border-bottom:1px solid #ccc;
    box-sizing: border-box;
}
.box176160{
    width: 176px;
    height: 160px;
    border-left:1px solid #ccc;
    border-bottom:1px solid #ccc;
    box-sizing: border-box;
}
/* end clothes */


